<template>
  <div>
    <el-button @click="blackPage">返回</el-button>
    <el-form
      :model="dataForm"
      ref="dataForm"
      label-width="150px"
      :disabled="isView"
    >
      <div class="m40">
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="基本信息"></el-step>
          <el-step title="拓展信息"></el-step>
        </el-steps>
      </div>

      <div v-if="active == 0">
        <el-form-item label="平台服务分类">
          <!-- <span>此服务对应的类目，分类由平台管理</span> -->
          <div v-if="productClassifyMultipleSelection.length > 0">
            <el-tag
              v-for="tagIndex in productClassifyMultipleSelection"
              :key="tagIndex.name"
              closable
              :type="tagIndex.type"
              @close="productClassifyClose(tagIndex)"
            >
              {{ tagIndex.name }}
            </el-tag>
          </div>
          <el-button @click="getCategory()" v-else>选择服务类目</el-button>
        </el-form-item>
        <el-form-item label="商家服务分组">
          <div class="flexcenter">
            <div v-if="groupingMultipleSelection.length > 0">
              <el-tag
                style="margin-right:10px"
                v-for="tagIndex in groupingMultipleSelection"
                :key="tagIndex.name"
                closable
                :type="tagIndex.type"
                @close="productGroupingClose(tagIndex)"
              >
                {{ tagIndex.name }}
              </el-tag>
            </div>
            <div class="flexcenter">
              <el-button @click="getGoodsGroupEvent()"
                >选择商家服务分组</el-button
              >
              <span class="textWorning">请选择二级分组</span>
            </div>
          </div>
        </el-form-item>
        <!-- <el-form-item label="新品">
          <el-radio-group v-model="dataForm.new_goods">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="热销">
          <el-radio-group v-model="dataForm.hot">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推荐">
          <el-radio-group v-model="dataForm.recommend">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- <el-form-item label="服务短标题">
					<el-input maxlength="10" show-word-limit v-model="dataForm.short_title" placeholder="非必填,服务短标题"></el-input>
				</el-form-item> -->
        <el-form-item label="服务名称">
          <el-input
            class="w300"
            maxlength="50"
            v-model="dataForm.title"
            placeholder="请输入服务名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务次数">
          <el-input-number
            class="w300"
            maxlength="20"
            v-model="dataForm.service_count"
            placeholder="请输入服务次数"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商家统一价">
          <el-input
            class="w300"
            @input="limitInputs($event, 'sale_price')"
            maxlength="8"
            v-model="dataForm.sale_price"
            placeholder="请输入商家统一价"
          ></el-input>
        </el-form-item>
        <el-form-item label="市场价">
          <el-input
            class="w300"
            @input="limitInputs($event, 'market_price')"
            maxlength="8"
            v-model="dataForm.market_price"
            placeholder="请输入市场价"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务图片">
          <Imglist
            @updataImg="updataImg"
            :limit="10"
            :value="blackImg"
          ></Imglist>
          <el-dialog :visible.sync="dialogVisible"
            ><img width="100%" :src="dialogImageUrl" alt=""
          /></el-dialog>
          <span
            >尺寸建议750x750（正方形模式）或750×1000（长图模式）像素以上，大小2M以下，最多10张
            (可拖拽图片调整显示顺序 )</span
          >
        </el-form-item>
        <el-form-item label="服务视频">
          <videoList
            @updataVideo="updataVideo"
            :videoUrl="dataForm.video_url"
          ></videoList>
          <span>上传视频时封面图片尺寸建议与服务图片一致</span>
        </el-form-item>
      </div>

      <!--拓展信息-->
      <div v-if="active == 1">
        <el-form-item label="服务项目">
          <div>
            <el-button
              style="float: right;margin-bottom: 20px;"
              @click="handleClickAdd(false)"
              >添加</el-button
            >
          </div>
          <el-table :data="dataForm.service_items" border style="width: 100%">
            <el-table-column
              prop="item_name"
              label="服务项目"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="num"
              label="数量"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="item_price"
              label="价格"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleClickAdd(true, scope.$index)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleClcikDelete(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="免费福利">
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="memberhandleClose(tag)"
            >{{ tag }}</el-tag
          >
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="memberhandleInputConfirm"
            @blur="memberhandleInputConfirm"
          ></el-input>
          <el-button
            v-else
            class="button-new-tag"
            size="small"
            @click="membershowInput"
            >添加</el-button
          >
        </el-form-item>
        <el-form-item label="消费有效期">
          <el-input-number
            v-model="dataForm.validity"
            :min="0"
            placeholder=""
          ></el-input-number>
          <span class="ml30">天</span>
        </el-form-item>
        <el-form-item label="提前">
          <el-input-number
            v-model="dataForm.advance_reservation"
            :min="0"
            placeholder=""
          ></el-input-number>
          <span class="ml30">天预约</span>
        </el-form-item>
        <el-form-item label="初始销量">
          <el-input-number
            v-model="dataForm.init_sale_num"
            :min="0"
            placeholder="请输入初始销量"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model="dataForm.sort"
            :min="0"
            placeholder="请输入排序号"
          ></el-input-number>
          <span class="ml30">数字越大越靠前</span>
        </el-form-item>

        <el-form-item label="服务详情">
          <editor @getTxt="getTxt" :value="valueDetail"></editor>
          <div v-if="isView" class="disable-box"></div>
        </el-form-item>
      </div>

      <!--选择服务类目-->
      <el-dialog
        title="服务类目"
        :append-to-body="true"
        :visible.sync="dialogProductClassify"
        width="30%"
        border
      >
        <span class="textWorning">提示：单选</span>
        <el-table
          ref="multipleTable"
          :data="productClassifyTableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          align="center"
          @selection-change="productGrouping"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="分类名称"
            align="center"
          ></el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogProductClassify = false">取 消</el-button>
          <el-button type="primary" @click="dialogProductList">确 定</el-button>
        </span>
      </el-dialog>

      <!--选择服务分组-->
      <el-dialog
        title="服务分组"
        :append-to-body="true"
        :visible.sync="dialogProductGrouping"
        width="30%"
      >
        <el-table
          ref="multipleTables"
          :data="productGroupingTableData"
          tooltip-effect="dark"
          border
          style="width: 100%"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          @selection-change="productGroupingSelectionChange"
        >
          <el-table-column
            type="selection"
            :selectable="selectable"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="分类名称"
            align="center"
          ></el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogProductGrouping = false">取 消</el-button>
          <el-button type="primary" @click="dialogProduct">确 定</el-button>
        </span>
      </el-dialog>
      <!--选择规格-->
      <el-dialog
        title="添加规格"
        :append-to-body="true"
        :visible.sync="dialogSku"
        width="30%"
      >
        <el-table
          ref="multipleTable"
          :data="skuData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          @selection-change="productSku"
        >
          <el-table-column
            type="selection"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="name"
            label="规格名称"
            align="center"
          ></el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogSku = false">取 消</el-button>
          <el-button type="primary" @click="dialogSkuChoose">确 定</el-button>
        </span>
      </el-dialog>
    </el-form>
    <!--服务项目-->
    <el-dialog
      title="添加服务项目"
      :append-to-body="true"
      :visible.sync="dialogService"
      width="30%"
    >
      <el-form
        ref="serviceForm"
        :model="serviceForm"
        label-width="80px"
        :rules="rules"
      >
        <el-form-item prop="item_name" label="项目名称">
          <el-input v-model="serviceForm.item_name"></el-input>
        </el-form-item>
        <el-form-item prop="num" label="数量">
          <el-input-number v-model="serviceForm.num"></el-input-number>
        </el-form-item>
        <el-form-item prop="item_price" label="价格">
          <el-input-number v-model="serviceForm.item_price"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogService = false">取 消</el-button>
        <el-button type="primary" @click="dialogServiceChoose">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-button @click="visible = false">提交</el-button> -->
    <el-button class="btn" v-if="active == 0" type="primary" @click="next"
      >下一步</el-button
    >
    <el-button class="btn" v-if="active == 1" @click="updown">上一步</el-button>
    <el-button v-if="active == 1 && !isView" type="primary" @click="submitInfo"
      >提{{ isView }}交</el-button
    >
    <singleGoods
      v-if="singleShow"
      ref="itemAddUpdate"
      @singleShowOnchange="singleShowOnchange"
    ></singleGoods>
  </div>
</template>

<script>
import serviceApione from '@/api/serviceApione.js'
import serviceApi from '@/api/serviceApi.js'
import { treeDataTranslate } from '@/utils'
import Imglist from './../../oss/oss-uploadImg'
import videoList from './../../oss/oss-uploadvideo'
import editor from '@/components/editor'
// import singleGoods from "./singleGoods";
import axios from 'axios'
import Vue from 'vue'
export default {
  components: {
    Imglist,
    videoList,
    editor
    // singleGoods
  },
  data() {
    return {
      rules: {
        item_name: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ],
        num: [
          {
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }
        ],
        item_price: [
          {
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }
        ]
      },
      currentIndex: null,
      serviceForm: {},
      dialogService: false,
      isView: false,
      editorId: '',
      topSelect: [],
      blackImg: [], // 编辑服务图片
      goodsNo: '',
      goodsPrice: '',
      retailPrice: '',
      updataArr: [],
      valueDetail: '',
      weight: '',
      volume: '',
      retailPrice: null,
      goodsPrice: null,
      weight: null,
      volume: null,
      visible: false,
      singleShow: false,
      active: 0, // 步骤初始化
      is_member: 0, // 是否开启会员折扣
      dataForm: {
        id: null,
        category_id: null,
        group_ids: [],
        hot: false,
        new_goods: false,
        recommend: false,
        title: '',
        service_count: 1,
        sale_price: 0,
        market_price: 0,
        images: [],
        video_url: '',
        service_items: [],
        welfare_items: [],
        validity: 0,
        advance_reservation: 0,
        init_sale_num: null,
        sort: null,
        mobile_detail: '',
        remark: ''
      },
      dataRule: [], // 提交提示
      skuAllId: [], // 选中的skuid集合
      dialogImageUrl: '',
      dialogVisible: false,
      dialogProductClassify: false, // 服务分类弹窗
      dialogProductGrouping: false,
      productClassifyMultipleSelection: [],
      productClassifyTableData: [],
      productGroupingTableData: [], // 服务分组table数据
      groupingMultipleSelection: [], // 提交循环服务分组
      groupSelection: [], // 选中的服务分组
      radioSpec: '1', // 服务规格
      tableData: [], // 单规格
      uploadVisible: false,
      choseSkuTable: [], // 编辑回显的sku
      skuData: [], // 规格table
      dialogSku: false,
      ids: [], // 选中规格
      skuList: [],
      childrenListsku: [],
      changeArr: [], // 选中的数据
      sendModel: [], // 运费模板
      choseIndex: '', // 选中的列表下标
      skuLocEditor: false,
      tableDataOld: [], // 存储
      dynamicTags: [], // 免费福利
      inputVisible: false,
      inputValue: ''
    }
  },
  mounted() {
    let id = this.$route.query.id
    let type = this.$route.query.type
    if (type == 'view') {
      this.isView = true
    } else {
      this.isView = false
    }
    if (id) {
      this.getCategoryList('')
      this.editorId = id
      this.dataForm.id = id
      this.goodsInfoData(id)
    }
  },
  methods: {
    handleClcikDelete(e) {
      this.dataForm.service_items.splice(e, 1)
    },
    // 服务项目弹窗确认
    dialogServiceChoose() {
      this.$refs['serviceForm'].validate(valid => {
        if (valid) {
          if (this.currentIndex != null) {
            this.dataForm.service_items[this.currentIndex] = this.serviceForm
            this.dialogService = false
          } else {
            this.dataForm.service_items.push(this.serviceForm)
            this.dialogService = false
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClickAdd(e, index) {
      if (e) {
        ;(this.serviceForm = this.dataForm.service_items[index]
          ? this.dataForm.service_items[index]
          : {}),
          (this.currentIndex = index)
        this.dialogService = true
      } else {
        this.serviceForm = {}
        this.currentIndex = null
        this.dialogService = true
      }
    },
    limitInput(value, name) {
      this[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    limitInputs(value, name) {
      this.dataForm[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || '' // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
    },
    // 编辑
    goodsInfoData(id) {
      serviceApione.getPlatformServiceInfo(id).then(res => {
        if (res.data.code == 200) {
          this.dataForm = res.data.data
          this.groupingMultipleSelection = this.dataForm.group_list
          let arr = []
          this.groupingMultipleSelection.forEach(item => {
            arr.push(item.id)
          })
          this.dataForm.group_ids = arr // 服务分组
          this.blackImg = this.dataForm.images // 服务图片
          this.dynamicTags = this.dataForm.welfare_items // 免费福利
          this.valueDetail = this.dataForm.mobile_detail // 商品详情
          console.log('this.dataForm1', this.dataForm)
        }
      })
    },
    // 编辑回选分类
    blackText(id) {},
    selectable(row, index) {
      if (row.parent_id > 0) {
        return true
      } else {
        return false
      }
    },
    // 上传之前
    beforeUploadHandle(file) {
      console.log(file)
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG /png格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG || isPNG) && isLt2M
    },
    // 随机生成文件名
    random_string(len) {
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    requestHttp(file) {
      let formData = new FormData()
      formData.append('file', file.file)
      let config = {
        headers: {
          token: Vue.cookie.get('token'),
          'Content-Type': 'multipart/form-data'
        }
      }
      axios
        .post(
          `${this.$config.SERVER_URL}/admin/sys/oss/upload`,
          formData,
          config
        )
        .then(obj => {
          if (obj.status == 200) {
            let fileUrl = obj.data.data.url
            this.updataArr.push(fileUrl)
            this.tableData[this.choseIndex].cover = fileUrl
          }
        })
    },
    // 删除图片
    delImg(row, index) {
      this.tableData[index].cover = ''
    },
    // 上传图片
    handleSingleImg(row, index) {
      this.choseIndex = index
    },
    // 关联单品
    handleSingle(row, index) {
      this.singleShow = true
      this.choseIndex = index
      console.log(row, index)
      this.$nextTick(() => {
        this.$refs.itemAddUpdate.init()
      })
    },
    singleShowOnchange(val) {
      if (val) {
        this.$nextTick(() => {
          this.tableData[this.choseIndex].single_goods_title = val.title
          this.tableData[this.choseIndex].single_goods_id = val.id
          this.tableData[this.choseIndex].single_goods_code = val.code
          this.tableData[this.choseIndex].singleData = val
        })
        console.log(this.tableData)
        this.singleShow = false
      }
    },
    // 编辑器
    getTxt(e) {
      this.dataForm.mobile_detail = e
    },
    // 上传视频
    updataVideo(e) {
      console.log(e)
      this.dataForm.video_url = e
    },
    // 上传图片
    updataImg(e) {
      this.dataForm.images = e
    },
    // 批量设置
    batchSetup() {
      if (this.tableData.length <= 0) {
        layer.alert('至少需要一条服务Sku')
        return
      }
      this.tableData.forEach(val => {
        if (this.goodsNo) {
          val.bar_code = this.goodsNo
        }
        if (this.goodsPrice) {
          val.market_price = this.goodsPrice
        }
        if (this.weight) {
          val.weight = this.weight
        }
        if (this.volume) {
          val.volume = this.volume
        }
        if (this.retailPrice) {
          val.sale_price = this.retailPrice
        }
        // val.market_price = this.goodsPrice
        // val.weight = this.weight
        // val.volume = this.volume
        // val.sale_price = this.retailPrice
      })
      this.$forceUpdate()
    },
    handleSkusChange(id) {
      // 存name
      let skuArr = []
      let skuOne = []
      let skuTwo = []
      let skuThree = []
      // 存id
      let skuArrid = []
      let skuOneid = []
      let skuTwoid = []
      let skuThreeid = []
      this.skuList.forEach(item => {
        item.children.forEach(keys => {
          if (keys.id == id) {
            keys.flag = !keys.flag
          }
        })
      })
      if (this.skuList.length == 1) {
        this.skuList[0].children.forEach(keys => {
          if (keys.flag) {
            skuOne.push(keys.name)
            skuOneid.push(keys.id)
          }
        })
        this.tableData = []
        this.skuAllId = []
        if (skuOne.length > 0) {
          skuOne.forEach(name => {
            this.tableData.push({
              name: name,
              single_goods_title: '',
              bar_code: '',
              cover: ''
            })
          })
          skuOneid.forEach(id => {
            this.skuAllId.push({
              id: id
            })
          })
        } else {
          this.skuAllId = []
          this.tableData = [
            {
              single_goods_title: '',
              cover: '',
              bar_code: '',
              market_price: null,
              sale_price: null,
              weight: null,
              volume: null
            }
          ]
        }
      }
      if (this.skuList.length == 2) {
        this.skuList[0].children.forEach(keys => {
          if (keys.flag) {
            skuOne.push(keys.name)
            skuOneid.push(keys.id)
          }
        })
        this.skuList[1].children.forEach(keys => {
          if (keys.flag) {
            skuTwo.push(keys.name)
            skuTwoid.push(keys.id)
          }
        })
        skuArr.push(skuOne, skuTwo)
        skuArrid.push(skuOneid, skuTwoid)
        console.log(skuArrid)
      }
      if (this.skuList.length == 3) {
        this.skuList[0].children.forEach(keys => {
          if (keys.flag) {
            skuOne.push(keys.name)
            skuOneid.push(keys.id)
          }
        })
        this.skuList[1].children.forEach(keys => {
          if (keys.flag) {
            skuTwo.push(keys.name)
            skuTwoid.push(keys.id)
          }
        })
        this.skuList[2].children.forEach(keys => {
          if (keys.flag) {
            skuThree.push(keys.name)
            skuThreeid.push(keys.id)
          }
        })

        skuArr.push(skuOne, skuTwo, skuThree)
        skuArrid.push(skuOneid, skuTwoid, skuThreeid)
      }

      if (this.skuList.length > 1) {
        // console.log(this.descartes(skuArr))
        this.tableData = []
        this.skuAllId = []
        let arrBox = this.descartes(skuArr)
        let arrBoxid = this.descartes(skuArrid)
        if (arrBox.length > 0) {
          arrBox.forEach(name => {
            this.tableData.push({
              name: name.join(';'),
              single_goods_title: '',
              bar_code: '',
              cover: ''
            })
          })
          arrBoxid.forEach(id => {
            this.skuAllId.push({
              id: id.join('|')
            })
          })
        } else {
          this.skuAllId = []
          this.tableData = [
            {
              single_goods_title: '',
              cover: '',
              bar_code: '',
              market_price: null,
              sale_price: null,
              weight: null,
              volume: null
            }
          ]
        }
      }
      if (this.skuLocEditor) {
        this.dataShow(this.tableData)
      }
    },
    // 编辑数据回显
    dataShow(data) {
      data.map((v, k) => {
        console.log(v, k)
        this.tableDataOld.map((val, key) => {
          if (v.name == val.sku_set_name) {
            data[k] = this.tableDataOld[key]
          }
        })
      })
      this.tableData = data
    },
    // 选择sku后请求
    dialogSkuChoose() {
      this.skuLocEditor = false
      this.skuAllId = []
      this.tableData = [
        {
          single_goods_title: '',
          cover: '',
          bar_code: '',
          market_price: null,
          sale_price: null,
          weight: null,
          volume: null
        }
      ]
      if (this.ids.length < 4 && this.ids.length > 0) {
        this.skuListGet(this.ids)
      } else {
        this.$message.warning('请选择1-3条规格~')
      }
    },

    // 选中sku获取列表
    skuListGet(id) {
      serviceApione.selectSku(id).then(res => {
        if (res.data.code == 200) {
          this.childrenListsku = []
          this.skuList = res.data.list
          this.skuList.forEach(item => {
            item.children.forEach(keys => {
              keys.flag = false
            })
          })
          if (this.editorId && this.skuLocEditor) {
            this.skuList.forEach(item => {
              item.children.forEach(keys => {
                this.choseSkuTable.forEach(l => {
                  l.values.forEach(j => {
                    if (keys.id == j.id) {
                      keys.flag = true
                    }
                  })
                })
              })
            })
          }
          this.dialogSku = false
        }
      })
    },
    // 选择规格
    productSku(e) {
      let ids = []
      e.forEach(item => {
        ids.push(item.id)
      })
      this.ids = ids
    },
    // 运费模板数据
    freighttemplateData() {
      serviceApione.freighttemplate().then(res => {
        if (res.data.code == 200) {
          this.sendModel = res.data.list
          if (res.data.list.length > 0) {
            this.dataForm.freight_template_id = res.data.list[0].id
          }
        }
      })
    },
    // 添加规格
    relevance() {
      this.dialogSku = true
      serviceApione.getSkuTop().then(res => {
        if (res.data.code == 200) {
          this.skuData = res.data.list
        }
      })
    },
    // 笛卡尔
    descartes(array) {
      // [ ['黑色', '白色', '蓝色'], ['1.2KG', '2.0KG', '3.0KG'] ]
      let that = this
      that.tableData = []
      if (array.length < 2) return array[0] || []
      return [].reduce.call(array, function(col, set) {
        var res = []
        col.forEach(function(c) {
          set.forEach(function(s) {
            var t = [].concat(Array.isArray(c) ? c : [c])
            t.push(s)
            res.push(t)
          })
        })
        return res
      })
    },

    // 选中图片
    selectImgList(images) {
      this.skuTableData[this.selectIndex].cover = images[0].fileUrl
    },
    blackPage() {
      if (this.isView) {
        this.$router.go(-1)
      } else {
        this.$router.push({
          path: 'platform-product/serviceList'
        })
      }
    },
    // 查询所有服务分类
    getCategory() {
      this.dialogProductClassify = true
      this.getCategoryList('')
    },
    // 查询所有服务分类
    getCategoryList(id) {
      serviceApi.getServiceList().then(res => {
        console.log('res', res)
        if (res.data.code == 200) {
          this.productClassifyTableData = res.data.list
          if (this.editorId) {
            res.data.list.forEach(k => {
              this.productClassifyMultipleSelection = [k]
            })
          }
        }
      })
    },

    // 移除选中的服务分类
    productClassifyClose(tagIndex) {
      if (!this.isView) {
        this.productClassifyMultipleSelection.splice(
          this.productClassifyMultipleSelection.indexOf(tagIndex),
          1
        )
        this.dataForm.category_id = null
      }
    },
    // 查询所有服务分组
    getGoodsGroupEvent() {
      this.dialogProductGrouping = true
      this.getGoodsGroupList()
    },
    // 查询所有服务分组
    getGoodsGroupList() {
      serviceApi.getServiceGroupList().then(res => {
        if (res.data.code == 200) {
          this.productGroupingTableData = res.data.list
          if (this.groupingMultipleSelection.length > 0) {
            this.groupingMultipleSelection.forEach(key => {
              res.data.list.forEach(e => {
                e.children.forEach(k => {
                  if (k.id == key.id) {
                    this.$nextTick(() => {
                      this.$refs.multipleTables.toggleRowSelection(k)
                    })
                  }
                })
              })
            })
          }
        }
      })
    },
    // 移除选中的服务分组
    productGroupingClose(tagIndex) {
      if (!this.isView) {
        this.groupingMultipleSelection.splice(
          this.groupingMultipleSelection.indexOf(tagIndex),
          1
        )
      }
    },
    // 上一步
    updown() {
      this.active = 0
    },
    // 步骤
    next() {
      console.log('this.dataForm', this.dataForm)
      if (!this.dataForm.category_id) {
        this.$message.warning('请选择服务类目')
      } else if (this.dataForm.group_ids.length == 0) {
        this.$message.warning('请选服务分组')
      } else if (!this.dataForm.title) {
        this.$message.warning('请输入服务名称')
      } else if (this.dataForm.service_count === '') {
        this.$message.warning('请输入服务次数')
      } else if (this.dataForm.sale_price === '') {
        this.$message.warning('请输入商家统一价')
      } else if (this.dataForm.market_price === '') {
        this.$message.warning('请输入市场价')
      } else if (this.dataForm.images.length == 0) {
        this.$message.warning('请上传服务图片')
      }
      // else if (!this.dataForm.video_url) {
      //   this.$message.warning('请上传服务视频');
      // }
      else {
        this.active = 1
      }
    },
    // 提交接口
    submitInfo() {
      console.log('dynamicTags', this.dynamicTags)
      // 组装json数据
      this.dataForm.welfare_items = this.dynamicTags
      if (this.dataForm.service_items.length == 0) {
        this.$message.warning('请添加服务项目')
      } else if (this.dataForm.welfare_items.length == 0) {
        this.$message.warning('请添加免费福利')
      } else if (this.dataForm.validity === '') {
        this.$message.warning('请输入消费有效期')
      } else if (this.dataForm.advance_reservation === '') {
        this.$message.warning('请输入提前预约天数')
      } else if (this.dataForm.init_sale_num === '') {
        this.$message.warning('请输入初始销量')
      } else if (this.dataForm.sort === '') {
        this.$message.warning('请输入排序')
      } else if (this.dataForm.mobile_detail === '') {
        this.$message.warning('请输入服务详情')
      } else {
        if (this.editorId) {
          serviceApione.updateServicegoods(this.dataForm).then(res => {
            if (res && res.data.code == 200) {
              this.$message.success('编辑成功')
              this.$router.go(-1)
            }
          })
        } else {
          serviceApione.createServicegoods(this.dataForm).then(res => {
            if (res && res.data.code == 200) {
              this.$message.success('发布成功')
              this.$router.go(-1)
            }
          })
        }
      }
    },
    productGrouping(val) {
      this.topSelect = val
    },
    // 服务分类选中
    dialogProductList() {
      if (this.topSelect.length == 1) {
        this.dialogProductClassify = false
        this.dataForm.category_id = this.topSelect[0].id
        this.productClassifyMultipleSelection = this.topSelect
      } else {
        this.$message.warning('只能选择一个分类')
      }
    },
    // 服务分组
    // 选中
    productGroupingSelectionChange(val) {
      this.groupSelection = val
    },
    // 确定提交数据
    dialogProduct() {
      let goodsIds = []
      this.groupingMultipleSelection = this.groupSelection
      this.groupSelection.forEach(item => {
        goodsIds.push(item.id)
      })
      this.dialogProductGrouping = false
      this.dataForm.group_ids = goodsIds
    },
    // 会员福利
    memberhandleClose(tag) {
      if (!this.isView) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
      }
    },

    membershowInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    memberhandleInputConfirm() {
      let inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss">
.ml30 {
  margin-left: 20px;
}

.w300 {
  width: 300px;
}

.m40 {
  margin: 40px 0;
}

.textWorning {
  font-size: 13px;
  color: #999;
  padding-left: 8px;
}

.flexBox {
  display: flex;
  align-items: center;
}

.flexcenter {
  display: flex;
  align-items: center;
}

.upbtns {
  position: relative;
  width: 100%;
  height: 36px;

  .upimgBtn {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 36px;
    z-index: 3;

    input {
      width: 100%;
      height: 36px;
      display: block;
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.el-999 {
  color: #999999;
}

.btn {
  margin-left: 50px;
}

.mt10 {
  margin-top: 10px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.disable-box {
  width: 95%;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
